<template>
  <div class="contain">
    <div class="contain-login">
      <div>
        <div class="login-form">
          <div class="title">完善个人信息</div>
          <a-row class="row">
            <div class="border"></div>
          </a-row>
          <a-form :form="form" @submit="submitInfo" :label-col="{ span: 4,offset: 1 }" :wrapper-col="{ span: 17,offset: 1 }">
           <a-form-item label="真实姓名">
             <a-input placeholder="请输入真实姓名" allowClear  v-decorator="['userRealname', { rules: [{ required: true, message: '请输入真实姓名!' }] }]"/>
           </a-form-item>
            <a-form-item label="身份">
              <a-radio-group name="radioGroup" v-decorator="['userRole',{initialValue: 0}]">
                <a-radio :value="0">
                  学生
                </a-radio>
                <a-radio :value="1">
                  老师
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="性别">
              <a-radio-group name="radioGroup2"  v-decorator="['userSex',{initialValue: 1}]">
                <a-radio :value="1">
                  男
                </a-radio>
                <a-radio :value="0">
                  女
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="学校">
              <a-input placeholder="请输入学校" allowClear  v-decorator="['stSchool', { rules: [{ required: true, message: '请输入学校!' }] }]"/>
            </a-form-item>
            <a-form-item label="学院">
              <a-input placeholder="请输入学院" allowClear  v-decorator="['stCollege', { rules: [{ required: true, message: '请输入学院!' }] }]"/>
            </a-form-item>
            <template v-if="authority === 1">
              <a-form-item label="班级">
                <a-input placeholder="请输入班级" allowClear  v-decorator="['stClass', { rules: [{ required: true, message: '请输入班级!' }] }]"/>
              </a-form-item>
              <a-form-item label="学号">
                <a-input placeholder="请输入学号" allowClear  v-decorator="['stNo', { rules: [{ required: true, message: '请输入学号!' }] }]"/>
              </a-form-item>
            </template>
            <a-row class="row btn-margin">
              <div>
                <template>
                  <a-button type="primary" html-type="submit">提交</a-button>
                </template>
                <a-button class="btn-space" @click="handleReset">重置</a-button>
              </div>
            </a-row>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {improveUserInfo} from "@/api";

export default {
  name: "ImproveInfo",
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      authority: 1
    }
  },
  methods: {
    //完善个人信息
    submitInfo(e) {
      let data
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          data = this.form.getFieldsValue()
          console.log('dataform', data)
          data.userId = window.localStorage.getItem('userId')
          if(data) {
            improveUserInfo(data)
              .then((res) => {
                if (res.status == 200){
                  this.$message.success('完善用户信息成功！');
                  this.handleReset()
                  this.$router.push('/index')
                }else{
                  this.$message.info(res.msg);
                  this.handleReset()
                }
              })
              .catch((err) => {
                this.$message.error(err);
                this.handleReset()
              })
          }
        }
      });
    },
    handleReset() {
      this.form.resetFields();
    },
  }
}
</script>

<style scoped>
  .contain{
    width: 100%;
    height: 100%;
    /*background-image: url("../assets/sky2.jpg");*/
    /*background-position: center center;*/
    /*background-size:cover;*/
    background: #1bcbb4;

  }
  .contain-login{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .login-form{
    width: 430px;
    background: rgba(255,255,255,1);
    padding: 10px;
    margin-top: 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /*margin: auto;*/
    /*align-items: center;*/
  }
  .title{
    color: #1bcbb4;
    font-weight: 600;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: center;
  }
  .border{
    background: #1bcbb4;
    width: 100px;
    height: 2px;
    margin-bottom: 20px;
  }
  .login-title{
    display: flex;
    flex-direction: row;
    justify-content: right;
    justify-items: right;
    align-items: center;
    padding: 5px;
  }
  .row{
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: center;
    margin-bottom: 15px;
  }
  .row-title{
    font-size: 16px;
  }
  .vertify{
    /*background-image: url("../assets/vertify_code.jpg");*/
    width: 60px;
    height: 80%;
    font-size: 22px;
    vertical-align: middle;
    cursor: pointer;
    /*height: 50px;*/
  }
  .btn-space{
    margin-left: 80px;
  }
  .btn-margin{
    margin-top: 30px;
  }
  .beian{
    text-decoration: none;
    cursor: pointer;
    color: #efefef;
    width: 100%;
    height: 5%;
  }
  .beian:hover{
    color: #ffffff;
  }
  .retrieve-pwd{
    color: #666;
    font-size: 13px;
  }
  .retrieve-pwd:hover{
    cursor: pointer;
    color: #001529;
    /*text-align: right;*/
  }
  .vertify{
    background-image: url("../assets/vertify_code.jpg");
    width: 60px;
    height: 80%;
    font-size: 22px;
    vertical-align: middle;
    cursor: pointer;
    /*height: 50px;*/
  }
</style>